{% extends "base.html" %}
{% load static %}

{% block title %} Login {% endblock %}

{% block nav %}
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <a class="navbar-brand" href="{% url 'yaksh:index' %}">
        <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
    </a>
</nav>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-md-offset-6">
            <div class="card border-primary">
                <div class="card-header">
                    <h3>Log in to Your Account</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <form action="" method="post">
                        {% csrf_token %}

                        <center>
                            <table class="table table-borderless">
                            {% if form.errors %}
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <div class="alert alert-dismissible alert-danger">
                                            <button type="button" class="close" data-dismiss="alert">
                                                <i class="fa fa-close"></i>
                                            </button>
                                            <strong>{{ error|escape }}</strong>
                                        </div>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <div class="alert alert-dismissible alert-danger">
                                        <button type="button" class="close" data-dismiss="alert">
                                            <i class="fa fa-close"></i>
                                        </button>
                                        <strong>{{ error|escape }}</strong>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            {{form.username}}
                            <br>
                            {{form.password}}
                            </table>
                        </center>
                        <div class="row justify-content-center">
                            <button class="btn btn-lg btn-success btn-block" type="submit" id="login-btn">
                                <i class="fa fa-sign-in"></i>&nbsp;Login
                            </button>
                            <a href="{% url 'yaksh:register' %}" class="btn btn-lg btn-primary btn-block" id="signup-btn">
                                <i class="fa fa-user-plus"></i>&nbsp;NEW USER? SIGN UP
                            </a>
                            <a class="btn btn-lg btn-primary btn-block" href="{% url 'password_reset' %}" id="forgot-btn">
                                Forgot Password?
                            </a>
                        </div>
                        <hr>
                        <center><h1> OR </h1></center>
                        Login with
                        <a class="btn btn-social-icon btn-google" href="{% url 'social:begin' 'google-oauth2' %}">
                            <span class="fa fa-google" style="font-size:32px;color:red" ></span>
                        </a>
                        <a class="btn btn-social-icon btn-facebook"  href="{% url 'social:begin' 'facebook' %}">
                            <span class="fa fa-facebook-square" style="font-size:32px"></span>
                        </a>
                        </form>
                        </br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>     
{% endblock content %}
